<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
  </head>
  <body>
    <div id="app">
      <h2>记事本</h2>
      <div class="main">
        <!-- 输入框 -->
        <input type="text" v-model.trim="title" @keyup.enter="add"/>
        <ul>
          <!-- 记录列表 -->
          <li v-for="(item, index) in list"  :key="item.id">
            <div class="content"><span>{{ index + 1 }}.</span> {{ item.title }}</div>
            <button @click="list.splice(index, 1)">❌</button>
          </li>
        </ul>
        <!-- 如果没数据要显示 -->
        <p v-show="list.length == 0" class="empty">空空如也...</p>
      </div>
      <!-- 底部栏 -->
      <div class="bottom">
        <span>合计: {{ list.length }}</span>
        <span @click="list = []">清空</span>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          title: '',
          // 要让list默认值不是空数组，而是从本地存储获取到的
          // 左边有值，就用左边的值，左边没值就用右边值
          // 在这里就是本地存储有值就取本地存储的值，没值就取空数组
          list: JSON.parse(localStorage.getItem('note83')) || []
        },
        methods: {

          add () {
            // 如果输入为空就不往下执行，并且弹出提示框
            if (this.title == '') return alert('请输入点内容')

            // 能来到这证明有内容，有内容就加到数组里
            // 但是数组要加对象，加到最前面（unshift）
            // 时间戳是指从1970年1月1日0时0分0秒0毫秒 到现在的 毫秒数     
            // 因为时间都是在向前的，所以每次的时间戳肯定是不一样的！
            this.list.unshift({
              id: Date.now(),
              title: this.title
            })

            // 加完后把输入框内容清空
            this.title = ''
          },
        },

        // 写侦听器的地方
        watch: {

          // 侦听list的改变
          list () {

            // 把数组给存到本地存储
            // 本地存储只能存字符串，复杂类型要转成JSON字符串才能存储
            window.localStorage.setItem('note83', JSON.stringify(this.list))
          }
        }
      })
    </script>
  </body>
</html>
